<template>
    <div class="result">
        <div class="result-text" v-if="$store.state.pk.loser === 'all'">
            Draw
        </div>
        <div class="result-text" v-else-if="$store.state.pk.loser === 'A' && $store.state.pk.a_id == $store.state.user.id">
            Lose
        </div>
        <div class="result-text" v-else-if="$store.state.pk.loser === 'B' && $store.state.pk.b_id == $store.state.user.id">
            Lose
        </div>
        <div class="result-text" v-else>
            Win
        </div>
        <div class="result-btn">
            <button class="btn btn-warning" @click="restart">再玩一次</button>
        </div>
    </div>
</template>

<script>
    import {useStore} from 'vuex'
    export default{
        name:'ResultBoard',
        setup() {
            const store = useStore()
            const restart = function () {   
                store.commit('UpdateStatus',"matching");
                store.commit('UpdateLoser',"none");
                store.commit('UpdateOpponent',{
                    username:"我的对手",
                    photo:'https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png'
                }) 
            }  
            return {
                restart
            }
        },
    }
</script>

<style scoped>
    .result{
        width: 26vw;
        height: 30vh;
        position: absolute;
        background-color: rgba(50,50, 50, 0.5);
        top: 25vh;
        left: 37vw;
    }
    .result-text{
        color: white;
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        padding-top: 20px;
        font-style: italic;
    }
    .result-btn{
        text-align: center;
        padding: 8vh;
    }
    @media screen and (max-width: 430px) and (min-width: 300px) {
        .result{
            width: 56vw;
            height: 30vh;
            position: absolute;
            background-color: rgba(50,50, 50, 0.5);
            top: 25vh;
            left: 22vw;
        }
    }
    @media screen and (max-width: 590px) and (min-width: 430px){
        .result{
            width: 56vw;
            height: 30vh;
            position: absolute;
            background-color: rgba(50,50, 50, 0.5);
            top: 25vh;
            left: 22vw;
        }
    }
</style>